<!--Table 通用组件
该组件使用于普通表格显示，主要用于方便单行数据的快捷开发
-->
<div class="layout-sub-page">
    <div class="table-action" *ngIf="topVisible">
        <div class="left-operate">
            <div *ngTemplateOutlet="Search">
            </div>
        </div>
        <div class="right-operate">
            <ng-container *ngFor="let optionModel of otherOptionModelList; let i = index"  >
                <ng-container *ngIf='optionModel.optionLabelType == OptionTypeEnum.BUTTON' [ngSwitch]='optionModel.eventKey'>
                    <button nz-button
                            *ngSwitchCase='EventKeyEnum.DELETE'
                           nz-popconfirm
                           nzPopconfirmTitle="确认{{optionModel.optionLabel}}?"
                           (nzOnConfirm)="eventPublish(null,optionModel.eventKey)"
                    >
                        {{optionModel.optionLabel}}
                    </button>
                    <button nz-button
                            *ngSwitchDefault
                            (click)='eventPublish(null,optionModel.eventKey)'
                    >
                        {{optionModel.optionLabel}}
                    </button>
                </ng-container>
            </ng-container>
        </div>
    </div>
<ng-template #showTotal>
    共{{total}}条记录
</ng-template>
<nz-table
    [nzLoading]='tableLoading'
    [nzScroll]='scrollValue'
    [nzData]="tableData"
    [(nzPageSize)]="searchObj.pageSize"
    [nzTotal]="total"
    [(nzPageIndex)]="searchObj.pageNum"
    [nzShowPagination]="true"
    [nzFrontPagination]="false"
    (nzPageSizeChange)='list()'
    (nzPageIndexChange)='list()'
    [nzShowTotal]='showTotal'
    nzShowQuickJumper="true"
>
    <thead>
    <tr>
        <th *ngIf='hasExpand' nzWidth='50px'></th>
        <th *ngFor="let column of tableColumnArray" [nzWidth]='column.width==null?"auto":column.width'>{{ column.name }}</th>
        <th [nzWidth]="optionWidth" *ngIf='optionModelList != null' nzRight>操作</th>
    </tr>
    </thead>
    <tbody [@listAnimation]="tableData">
    <ng-container *ngFor="let item of tableData ">
        <tr  [ngClass]="{ 'tr-selected': item.checked === true }" (click)="rowClick(item)">
            <td *ngIf='hasExpand' nzWidth='50px' [(nzExpand)]="item.expand"></td>
            <td *ngFor="let column of tableColumnArray"  >
                <div [style]='{"maxHeight":maxHeight}' >
                    <!--            文字-->
                    <span *ngIf='column.type === ColumnType.TEXT' >{{ getItemValue(item,column.key) }}{{column.unit}}</span>
                    <!--            标签-->
                    <div *ngIf='column.type === ColumnType.LABEL'>
                        <nz-tag *ngIf='tableCaseMap.get(column.key).get(item[column.key]+"")' [nzColor]='tableCaseMap.get(column.key).get(item[column.key]+"").color'>{{ tableCaseMap.get(column.key).get(item[column.key]+"").tag }}</nz-tag>
                        <nz-tag *ngIf='!tableCaseMap.get(column.key).get(item[column.key]+"")' [nzColor]='tableCaseMap.get(column.key).get("other").color'>{{ tableCaseMap.get(column.key).get("other").tag }}</nz-tag>
                    </div>
                    <div *ngIf='column.type === ColumnType.DICT_LABEL'>
                        <app-dict-label [dictKey]='column.dictKey' [dictValue]='item[column.key]'></app-dict-label>
                    </div>
                    <!--            图片-->
                    <div *ngIf='column.type === ColumnType.IMAGE'>
                        <img style='width: 70px;height: 70px' [src]='item[column.key]' alt=''/>
                    </div>
                    <!--            html-->
                    <div *ngIf='column.type === ColumnType.HTML'>
                        <p
                            nz-typography
                            nzEllipsis
                            [nzEllipsisRows]="maxHeight/20"
                            [innerHTML]='item[column.key]'
                        >
                        </p>
                    </div>
                    <div *ngIf='column.type === ColumnType.SWITCH'>
                        <nz-switch [(ngModel)]="item[column.key]"></nz-switch>
                    </div>
                    <div *ngIf='column.type === ColumnType.SWITCH_UN'>
                        <nz-switch [ngModel]="item[column.key]"  (ngModelChange)="item[column.key] = !$event"></nz-switch>
                    </div>
                </div>
            </td>
            <td *ngIf='optionModelList != null' nzRight>
                <ng-container *ngFor="let optionModel  of optionModelList; let i = index">
                    <ng-container *ngIf='optionModel.optionLabelType == OptionTypeEnum.TEXT' [ngSwitch]='optionModel.eventKey'>
                        <nz-divider *ngIf='i!=0' nzType="vertical" ></nz-divider>
                        <a *ngSwitchCase='OptionKeyEnum.DELETE'
                           nz-popconfirm
                           nzPopconfirmTitle="确认删除?"
                           (nzOnConfirm)="deleteItem(item)"
                        >
                            {{optionModel.optionLabel}}
                        </a>
                        <a  *ngSwitchDefault (click)='eventPublish(item,optionModel.eventKey)'>
                            {{optionModel.optionLabel}}
                        </a>
                    </ng-container>
                    <ng-container *ngIf='optionModel.optionLabelType == OptionTypeEnum.SELECT'>
                        <label  nz-checkbox [(ngModel)]="item.isCheckedButton" (ngModelChange)="checkedButtonChange(item)">
                        </label>
                    </ng-container>
                    <ng-container *ngIf='optionModel.optionLabelType == OptionTypeEnum.ICON'>
                        <nz-divider *ngIf='i!=0' nzType="vertical" ></nz-divider>
                        <button nz-button nzType='link' (click)="eventPublish(item,optionModel.eventKey)">
                         <app-svg-show [code]='iconData.get(optionModel.eventType)' [width]='30' [height]='30'></app-svg-show>
                        </button>
                    </ng-container>
                    <ng-container *ngIf='optionModel.optionLabelType == OptionTypeEnum.MORE'>
                        <nz-divider *ngIf='i!=0' nzType="vertical" ></nz-divider>
                        <span>
                            <a nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu">
                            {{optionModel.optionLabel}}
                            <span nz-icon nzType="down"></span>
                        </a>
                        </span>
                        <nz-dropdown-menu #menu="nzDropdownMenu">
                            <ul nz-menu>
                                <li *ngFor="let subOptionModel  of optionModel.children; let i = index" nz-menu-item>
                                    <ng-container *ngIf='subOptionModel.optionLabelType == OptionTypeEnum.TEXT' [ngSwitch]='optionModel.eventKey'>
                                        <a *ngSwitchCase='OptionKeyEnum.DELETE'
                                           nz-popconfirm
                                           nzPopconfirmTitle="确认删除?"
                                           (nzOnConfirm)="deleteItem(item)"
                                        >
                                            {{subOptionModel.optionLabel}}
                                        </a>
                                        <a  *ngSwitchDefault (click)='eventPublish(item,subOptionModel.eventKey)'>
                                            {{subOptionModel.optionLabel}}
                                        </a>
                                    </ng-container>
                                </li>
                            </ul>
                        </nz-dropdown-menu>
                    </ng-container>


                </ng-container>
            </td>
        </tr>
        <tr *ngIf='hasExpand' [nzExpand]="item.expand"></tr>
    </ng-container>
    </tbody>
</nz-table>
</div>
